<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery.freezeheader.js表格thead随滚动条滚动</title>
    <script type="text/javascript" src="../../js/jquery-1.9.1.js"></script>
    <script src="../../js/jquery.freezeheader.js"></script>
    <link rel="stylesheet" type="text/css" href="../../css/style1.css" />
    <script language="javascript" type="text/javascript">
        $(function() {
            $("#table2").freezeHeader();
        })
    </script>
    <style type="text/css">
        body{ background:#EEEEEE;margin:0; padding:0; font-family:"微软雅黑", Arial, Helvetica, sans-serif; }
        a{ color:#006600; text-decoration:none;}
        a:hover{color:#990000;}
        .top{ margin:5px auto; color:#990000; text-align:center;}
        .info select{ border:1px #993300 solid; background:#FFFFFF;}
        .info{ margin:5px; text-align:center;}
        .info #show{ color:#3399FF; }
        .bottom{ text-align:right; font-size:12px; color:#CCCCCC; width:1000px;}
    </style>

</head>
<body>
<div class="wrapper">

    <div id="hdtable2" style="visibility: hidden; height:100px; width: 800px; position: fixed;">
        <table style="margin: 0 0;" class="gridView">
            <thead>
               <tr>
                   <th>车辆信息</th>
                   <td>车型1</td>
                   <td>车型2</td>
                   <td>车型3</td>
                </tr>
            </thead>
        </table>
    </div>
    <table class="gridView" id="table2">
        <thead>
        <tr>
            <th>车辆信息</th>
            <td>
                <div>
                    <a href="">
                        <img id="img1" src="../../images/demo.png" width="160" height="120" style="padding-top: 20px;padding-bottom:20px" alt=""/>
                    </a>
                </div>
                <div>
                    <label>品牌:</label>
                    <select class="" id="brand">
                        <option value="">——</option>
                        <option>奔驰</option>
                        <option>宝马</option>
                        <option>奥迪</option>
                        <option>保时捷</option>
                        <option>欧宝</option>
                        <option>宝沃</option>
                        <option>卡尔森</option>
                        <option>巴博斯</option>
                        <option>迈莎锐</option>
                        <option>柯斯达</option>
                    </select>
                    <label>车名:</label>  
                    <select class="" id="c_name" style="width: 150px">
                    </select> 
                </div>
            </td>
            <td>
                <div>
                    <a href="">
                        <img id="img2" src="../../images/demo.png" width="160" height="120" style="padding-top: 20px;padding-bottom:20px" alt=""/>
                    </a>
                </div>
                <div>
                    <label>品牌:</label>
                    <select class="" id="brand2">
                        <option value="">——</option>
                        <option>奔驰</option>
                        <option>宝马</option>
                        <option>奥迪</option>
                        <option>保时捷</option>
                        <option>欧宝</option>
                        <option>宝沃</option>
                        <option>卡尔森</option>
                        <option>巴博斯</option>
                        <option>迈莎锐</option>
                        <option>柯斯达</option>
                    </select>
                    <label>车名:</label>  
                    <select class="" id="c_name2" style="width: 150px">
                    </select> 
                </div>
            </td>
            <td><div>
                <a href="">
                    <img id="img3" src="../../images/demo.png" width="160" height="120" style="padding-top: 20px;padding-bottom:20px" alt=""/>
                </a>
            </div>
                <div>
                    <label>品牌:</label>
                    <select class="" id="brand3">
                        <option value="">——</option>
                        <option>奔驰</option>
                        <option>宝马</option>
                        <option>奥迪</option>
                        <option>保时捷</option>
                        <option>欧宝</option>
                        <option>宝沃</option>
                        <option>卡尔森</option>
                        <option>巴博斯</option>
                        <option>迈莎锐</option>
                        <option>柯斯达</option>
                    </select>
                    <label>车名:</label>  
                    <select class="" id="c_name3" style="width: 150px">
                    </select> 
                </div></td>
        </tr>
        </thead>
        <tbody>
        <tr class="grid">
            <th style="background: #e2e2e2">
               <a href="">基本参数
               </a></th>
            <td style="background: #e2e2e2"></td>
            <td style="background: #e2e2e2"></td>
            <td style="background: #e2e2e2"></td>
        </tr>

        <tr class="grid">
            <th><a href='#'>
               厂商
            </a></th>
            <td><label id="changshang1" style="color: darkgrey">——</label></td>
            <td><label id="changshang2" style="color: darkgrey">——</label></td>
            <td><label id="changshang3" style="color: darkgrey">——</label></td>
        </tr>

        <tr class="grid">
            <th><a href='#'>
                品牌
            </a></th>
            <td><label id="jibie1" style="color: darkgrey">——</label></td>
            <td><label id="jibie2" style="color: darkgrey">——</label></td>
            <td><label id="jibie3" style="color: darkgrey">——</label></td>
        </tr>


        <tr class="grid">
            <th><a href='#'>
                最大功率（kW）
            </a></th>
            <td><label id="gonglv1" style="color: darkgrey">——</label></td>
            <td><label id="gonglv2" style="color: darkgrey">——</label></td>
            <td><label id="gonglv3" style="color: darkgrey">——</label></td>
        </tr>

        <tr class="grid">
            <th><a href='#'>
                最大扭矩(N.m)
            </a></th>
            <td><label id="niujv1" style="color: darkgrey">——</label></td>
            <td><label id="niujv2" style="color: darkgrey">——</label></td>
            <td><label id="niujv3" style="color: darkgrey">——</label></td>
        </tr>

        <tr class="grid">
            <th><a href='#'>
                最大马力
            </a></th>
            <td><label id="mali1" style="color: darkgrey">——</label></td>
            <td><label id="mali2" style="color: darkgrey">——</label></td>
            <td><label id="mali3" style="color: darkgrey">——</label></td>
        </tr>

        <tr class="grid">
            <th><a href='#'>
                变速箱
            </a></th>
            <td><label id="biansu1" style="color: darkgrey">——</label></td>
            <td><label id="biansu2" style="color: darkgrey">——</label></td>
            <td><label id="biansu3" style="color: darkgrey">——</label></td>
        </tr>



        <tr class="grid">
            <th style="background: #e2e2e2">
                <a href="">车身
                </a></th>
            <td style="background: #e2e2e2"></td>
            <td style="background: #e2e2e2"></td>
            <td style="background: #e2e2e2"></td>
        </tr>
        <tr class="grid">
            <th><a href='#'>
                车身结构
            </a></th>
            <td><label id="jiegou1" style="color: darkgrey">——</label></td>
            <td><label id="jiegou2" style="color: darkgrey">——</label></td>
            <td><label id="jiegou3" style="color: darkgrey">——</label></td>
        </tr>
        <tr class="grid">
            <th style="background: #e2e2e2">
                <a href="">发动机
                </a></th>
            <td style="background: #e2e2e2"></td>
            <td style="background: #e2e2e2"></td>
            <td style="background: #e2e2e2"></td>
        </tr>


        <tr class="grid">
            <th><a href='#'>
                排量（mL）
            </a></th>
            <td><label id="pailiang1" style="color: darkgrey">——</label></td>
            <td><label id="pailiang2" style="color: darkgrey">——</label></td>
            <td><label id="pailiang3" style="color: darkgrey">——</label></td>
        </tr>

        <tr class="grid">
            <th><a href='#'>
               进气形式
            </a></th>
            <td><label id="jinqi1" style="color: darkgrey">——</label></td>
            <td><label id="jinqi2" style="color: darkgrey">——</label></td>
            <td><label id="jinqi3" style="color: darkgrey">——</label></td>
        </tr>
        <tr class="grid">
            <th style="background: #e2e2e2">
                <a href="">车轮制动
                </a></th>
            <td style="background: #e2e2e2"></td>
            <td style="background: #e2e2e2"></td>
            <td style="background: #e2e2e2"></td>
        </tr>


        <tr class="grid">
            <th><a href='#'>
                制动方式
            </a></th>
            <td><label id="zhidong1" style="color: darkgrey">——</label></td>
            <td><label id="zhidong2" style="color: darkgrey">——</label></td>
            <td><label id="zhidong3" style="color: darkgrey">——</label></td>
        </tr>
        </tbody>
    </table>
    <script type="text/javascript" src="http://shouce.ren/static/ad/gg.js"></script>
</div>
</body>
<script>
    var sctBrand=document.getElementById("brand");
    var sctCname=document.getElementById("c_name");
    var sctBrand2=document.getElementById("brand2");
    var sctCname2=document.getElementById("c_name2");
    var sctBrand3=document.getElementById("brand3");
    var sctCname3=document.getElementById("c_name3");
    var brand,car_name;
    var brand2,car_name2;
    var brand3,car_name3;

    $(document).ready(function () {
        if(sessionStorage.getItem("c_brand_more")!=null){
            nochange();
            $("#brand").val(sessionStorage.getItem("c_brand_more"))
        }

        //没有change
        function nochange(){
            $.ajax({
                url: "../../car/selectAllByBrand",
                type: "get",
                dataType: "json",
                async: false,//设置为同步方法
                data:{
                    b_name: sessionStorage.getItem("c_brand_more")
                },
                success: function (result) {
                    if(result.errorCode==0){
                        var list = result.objectList;
                        var mySelect = $("#c_name");
                        mySelect.html("");
                        $(list).each(function (index) {
                            html = $("<option></option>").text(list[index].c_name);
                            mySelect.append(html);
                        })
                        $("#c_name").val(sessionStorage.getItem("c_name_more"))
                    }
                }
            });
            $.ajax({
                url: "../../car/selectAllByName",
                type: "get",
                dataType: "json",
                async: false,//设置为同步方法
                data:{
                    c_name: sessionStorage.getItem("c_name_more")
                },
                success: function (result) {

                    $("#changshang1").text(result.b_name);
                    $("#jibie1").text(result.t_name);
                    $("#gonglv1").text(result.c_maxpower);
                    $("#niujv1").text(result.c_maxtorque);
                    $("#mali1").text(result.c_maxhorsepower);
                    $("#biansu1").text(result.c_gearbox);
                    $("#jiegou1").text(result.c_structure);
                    $("#pailiang1").text(result.c_displacement);
                    $("#jinqi1").text(result.i_name);
                    $("#zhidong1").text(result.c_braking);
                    $("#img1").attr("src",result.c_surface);
                }

            });
        }

        $("#brand").change(function () {
            brand=sctBrand.options[sctBrand.options.selectedIndex].text;
            $.ajax({
                url: "../../car/selectAllByBrand",
                type: "get",
                dataType: "json",
                async: false,//设置为同步方法
                data:{
                    b_name: brand
                },
                success: function (result) {
                    if(result.errorCode==0){
                        var list = result.objectList;
                        var mySelect = $("#c_name");
                        mySelect.html("");
                        $(list).each(function (index) {
                            html = $("<option></option>").text(list[index].c_name);
                            mySelect.append(html);
                        })
                    }

                }
            });
        })
        $("#c_name").change(function () {
            car_name=sctCname.options[sctCname.options.selectedIndex].text;

            $.ajax({
                url: "../../car/selectAllByName",
                type: "get",
                dataType: "json",
                async: false,//设置为同步方法
                data:{
                    c_name: car_name
                },
                success: function (result) {
                    $("#changshang1").text(result.b_name);
                    $("#jibie1").text(result.t_name);
                    $("#gonglv1").text(result.c_maxpower);
                    $("#niujv1").text(result.c_maxtorque);
                    $("#mali1").text(result.c_maxhorsepower);
                    $("#biansu1").text(result.c_gearbox);
                    $("#jiegou1").text(result.c_structure);
                    $("#pailiang1").text(result.c_displacement);
                    $("#jinqi1").text(result.i_name);
                    $("#zhidong1").text(result.c_braking);
                    $("#img1").attr("src",result.c_surface);

                    max();
                }
            });
        })
        $("#brand2").change(function () {
            brand2=sctBrand2.options[sctBrand2.options.selectedIndex].text;
            $.ajax({
                url: "../../car/selectAllByBrand",
                type: "get",
                dataType: "json",
                async: false,//设置为同步方法
                data:{
                    b_name: brand2
                },
                success: function (result) {
                    if(result.errorCode==0){
                        var list = result.objectList;
                        var mySelect = $("#c_name2");
                        mySelect.html("");
                        $(list).each(function (index) {
                            html = $("<option></option>").text(list[index].c_name);
                            mySelect.append(html);
                        })
                    }

                }
            });
        })
        $("#c_name2").change(function () {
            car_name2=sctCname2.options[sctCname2.options.selectedIndex].text;

            $.ajax({
                url: "../../car/selectAllByName",
                type: "get",
                dataType: "json",
                async: false,//设置为同步方法
                data:{
                    c_name: car_name2
                },
                success: function (result) {
                    $("#changshang2").text(result.b_name);
                    $("#jibie2").text(result.t_name);
                    $("#gonglv2").text(result.c_maxpower);
                    $("#niujv2").text(result.c_maxtorque);
                    $("#mali2").text(result.c_maxhorsepower);
                    $("#biansu2").text(result.c_gearbox);
                    $("#jiegou2").text(result.c_structure);
                    $("#pailiang2").text(result.c_displacement);
                    $("#jinqi2").text(result.i_name);
                    $("#zhidong2").text(result.c_braking);
                    $("#img2").attr("src",result.c_surface);
                    max();

                }
            });
        })
        $("#brand3").change(function () {
            brand3=sctBrand3.options[sctBrand3.options.selectedIndex].text;
            $.ajax({
                url: "../../car/selectAllByBrand",
                type: "get",
                dataType: "json",
                async: false,//设置为同步方法
                data:{
                    b_name: brand3
                },
                success: function (result) {
                    if(result.errorCode==0){
                        var list = result.objectList;
                        var mySelect = $("#c_name3");
                        mySelect.html("");
                        $(list).each(function (index) {
                            html = $("<option></option>").text(list[index].c_name);
                            mySelect.append(html);
                        })
                    }

                }
            });
        })
        $("#c_name3").change(function () {
            car_name3=sctCname3.options[sctCname3.options.selectedIndex].text;

            $.ajax({
                url: "../../car/selectAllByName",
                type: "get",
                dataType: "json",
                async: false,//设置为同步方法
                data:{
                    c_name: car_name3
                },
                success: function (result) {
                    $("#changshang3").text(result.b_name);
                    $("#jibie3").text(result.t_name);
                    $("#gonglv3").text(result.c_maxpower);
                    $("#niujv3").text(result.c_maxtorque);
                    $("#mali3").text(result.c_maxhorsepower);
                    $("#biansu3").text(result.c_gearbox);
                    $("#jiegou3").text(result.c_structure);
                    $("#pailiang3").text(result.c_displacement);
                    $("#jinqi3").text(result.i_name);
                    $("#zhidong3").text(result.c_braking);
                    $("#img3").attr("src",result.c_surface);

                    max();


                }
            });
        })

        function max() {
            if($("#gonglv2").text()==Math.max($("#gonglv3").text(),$("#gonglv2").text(),$("#gonglv1").text())){
                $("#gonglv2").css("color","coral")
                $("#gonglv1").css("color","darkgrey")
                $("#gonglv3").css("color","darkgrey")
            }
            else if($("#gonglv1").text()==Math.max($("#gonglv3").text(),$("#gonglv2").text(),$("#gonglv1").text())){
                $("#gonglv1").css("color","coral")
                $("#gonglv3").css("color","darkgrey")
                $("#gonglv2").css("color","darkgrey")
            }else if($("#gonglv3").text()==Math.max($("#gonglv3").text(),$("#gonglv2").text(),$("#gonglv1").text())){
                $("#gonglv3").css("color","coral")
                $("#gonglv1").css("color","darkgrey")
                $("#gonglv2").css("color","darkgrey")
            }

            if($("#niujv2").text()==Math.max($("#niujv3").text(),$("#niujv2").text(),$("#niujv1").text())){
                $("#niujv2").css("color","coral")
                $("#niujv1").css("color","darkgrey")
                $("#niujv3").css("color","darkgrey")
            }else if($("#niujv1").text()==Math.max($("#niujv3").text(),$("#niujv2").text(),$("#niujv1").text())){
                $("#niujv1").css("color","coral")
                $("#niujv3").css("color","darkgrey")
                $("#niujv2").css("color","darkgrey")
            }else if($("#niujv3").text()==Math.max($("#niujv3").text(),$("#niujv2").text(),$("#niujv1").text())){
                $("#niujv3").css("color","coral")
                $("#niujv1").css("color","darkgrey")
                $("#niujv2").css("color","darkgrey")
            }

            if($("#mali2").text()==Math.max($("#mali3").text(),$("#mali2").text(),$("#mali1").text())){
                $("#mali2").css("color","coral")
                $("#mali3").css("color","darkgrey")
                $("#mali1").css("color","darkgrey")
            }else if($("#mali1").text()==Math.max($("#mali3").text(),$("#mali2").text(),$("#mali1").text())){
                $("#mali1").css("color","coral")
                $("#mali3").css("color","darkgrey")
                $("#mali2").css("color","darkgrey")
            }else if($("#mali3").text()==Math.max($("#mali3").text(),$("#mali2").text(),$("#mali1").text())){
                $("#mali3").css("color","coral")
                $("#mali1").css("color","darkgrey")
                $("#mali2").css("color","darkgrey")
            }

            if($("#pailiang2").text()==Math.max($("#pailiang3").text(),$("#pailiang2").text(),$("#pailiang1").text())){
                $("#pailiang2").css("color","coral")
                $("#pailiang3").css("color","darkgrey")
                $("#pailiang1").css("color","darkgrey")
            }else if($("#pailiang1").text()==Math.max($("#pailiang3").text(),$("#pailiang2").text(),$("#pailiang1").text())){
                $("#pailiang1").css("color","coral")
                $("#pailiang3").css("color","darkgrey")
                $("#pailiang2").css("color","darkgrey")
            }else if($("#pailiang3").text()==Math.max($("#pailiang3").text(),$("#pailiang2").text(),$("#pailiang1").text())){
                $("#pailiang3").css("color","coral")
                $("#pailiang1").css("color","darkgrey")
                $("#pailiang2").css("color","darkgrey")
            }


        }

    })

</script>
</html>